import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

import 'package:get/get.dart';
import 'package:xiaomi_shop/app/api/api.dart';
import 'package:xiaomi_shop/app/services/screenAdapter.dart';
import 'package:xiaomi_shop/models/index.dart';

import '../controllers/category_controller.dart';

class CategoryView extends GetView<CategoryController> {
  const CategoryView({Key? key}) : super(key: key);

  _leftList() {
    return Obx(() => Container(
          width: ScreenAdapter.width(270),
          height: double.infinity,
          child: ListView.builder(
            itemCount: controller.catePlist.length,
            itemBuilder: (context, index) {
              ShopCategoryModel model = controller.catePlist.value[index];
              return Obx(() => ListTile(
                    leading: Container(
                      width: ScreenAdapter.width(10),
                      height: ScreenAdapter.height(50),
                      color: (index == controller.index.value)
                          ? Colors.red
                          : Colors.transparent,
                    ),
                    minLeadingWidth: ScreenAdapter.width(8),
                    contentPadding: EdgeInsets.fromLTRB(0,
                        ScreenAdapter.height(20), 0, ScreenAdapter.height(20)),
                    title: Text(
                      model.title!,
                      style: TextStyle(
                          fontWeight: (index == controller.index.value)
                              ? FontWeight.bold
                              : FontWeight.normal),
                    ),
                    onTap: () {
                      if (controller.index.value == index) {
                        return;
                      }
                      controller.index.value = index;
                      controller.getCateClistData(model.id!);
                    },
                  ));
            },
          ),
        ));
  }

  _rightClist() {
    return Expanded(
        child: Obx(() => Container(
              child: MasonryGridView.count(
                crossAxisCount: 3,
                mainAxisSpacing: ScreenAdapter.height(40),
                crossAxisSpacing: ScreenAdapter.width(40),
                itemCount: controller.cateClist.length,
                itemBuilder: (context, index) {
                  ShopCategoryModel model = controller.cateClist.value[index];
                  return GestureDetector(
                    onTap: () =>
                        Get.toNamed('/shop', parameters: {"cid": model.id!}),
                    child: Column(
                      children: [
                        Image.network(
                          "${Api.basicUrl}/${model.pic}",
                          fit: BoxFit.fill,
                        ),
                        SizedBox(
                          height: ScreenAdapter.height(20),
                        ),
                        Text(model.title!)
                      ],
                    ),
                  );
                },
              ),
            )));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        scrolledUnderElevation: 0,
        title: Container(
          height: ScreenAdapter.height(100),
          decoration: BoxDecoration(
              color: const Color.fromARGB(255, 243, 243, 243),
              borderRadius: BorderRadius.circular(ScreenAdapter.height(50))),
          child: InkWell(
            onTap: () => Get.toNamed('/search'),
            child: Row(
              children: [
                Padding(
                  padding: EdgeInsets.fromLTRB(
                      ScreenAdapter.width(34), 0, ScreenAdapter.width(16), 0),
                  child: const Icon(
                    Icons.search,
                    color: Colors.black26,
                  ),
                ),
                Text(
                  "手机",
                  style: TextStyle(
                      color: Colors.black26,
                      fontSize: ScreenAdapter.fontSize(36)),
                )
              ],
            ),
          ),
        ),
        centerTitle: true,
        actions: [
          IconButton(
              onPressed: () {},
              icon: Icon(
                Icons.message_outlined,
                color: Colors.black87,
                size: ScreenAdapter.width(64),
              ))
        ],
      ),
      body: Row(
        children: [
          _leftList(),
          _rightClist(),
        ],
      ),
    );
  }
}
